<template>
<div class="containerWrap">
  <el-container class="container">
    <el-main class="floor">
      <div style="background:#fff;height:100%">
        <el-row :gutter="15">
          <el-col :span='24'>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                 <div class="dzy-custom-search-box chart--search-box">
                  <div class="indexTit">年度金额：</div>
                  <div>
                    选择年份：
                    <el-date-picker
                      v-model="selectForm.year"
                      align="right"
                      type="year"
                      size="small"
                      value-format="yyyy"
                      placeholder="选择年">
                    </el-date-picker>
                    &nbsp;
                  </div>
                  <div>
                    <el-button @click="searchHandleClick(0)" size="small"  type="primary" icon="el-icon-search">查询</el-button>
                  </div>
                  <div>
                    <el-button type="info" size="small" plain>实收金额：{{total.amount}}</el-button>
                  </div>
                </div>
                </div>
                <div >
                  <el-row>
                    <el-col :span='24'><div class="chart-main" id="moneyEchart"></div></el-col>
                  </el-row>
                </div>
              </el-card>
          </el-col>
        </el-row>
        <div class="padBot20"></div>
      </div>
    </el-main>
  </el-container>
</div>
</template>

<script>
import {getCaseYearData, getMoneyYearData, getUserYearData} from '@/http/AppData'
import { findDeptList } from '@/http/AppApi'
export default {
  data () {
    return {
      value: new Date(),
      formData: {},
      selectForm: {},
      total: {},
      deptOption: []
    }
  },
  components: {},
  mounted () {
    this.reqMoneyApi()
  },
  methods: {
    findDeptList (id) {
      let param = {'unitId': id}
      findDeptList(param).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.deptOption = data
        }
      })
    },
    reqCaseApi () {
      let param = {
        lengend: [],
        xAxisData: [],
        seriesData: {}
      }
      getCaseYearData(this.selectForm).then(resp => {
        if (resp.code && resp.code === '200') {
          let intNum = 0
          let data = resp.data
          for (const key in data) {
            if (data.hasOwnProperty(key)) {
              const element = data[key]
              param.xAxisData.push(key + '月')
              for (const k in element) {
                if (element.hasOwnProperty(k)) {
                  const ele = element[k]
                  if (!param.seriesData[k]) {
                    param.seriesData[k] = []
                    param.lengend.push(k)
                  }
                  param.seriesData[k].push(ele)
                  intNum += ele
                }
              }
            }
          }
          this.$set(this.total, 'count', parseInt(intNum))
          this.loadCaseEchart(param)
        }
      })
    },
    loadCaseEchart (param) {
      let m = this
      let contradictionEchart = this.$echarts.init(document.getElementById('peopleEchart'))
      contradictionEchart.setOption({
        tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
        legend: {
          data: param.lengend,
          y: '10px'
        },
        grid: {top: '15%', left: '1%', right: '5%', bottom: '5%', containLabel: true},
        calculable: true,
        xAxis: [{type: 'category', axisLabel: {color: 'black'}, axisLine: {lineStyle: m.textStyle}, data: param.xAxisData}],
        yAxis: [{type: 'value',
          name: '数量',
          axisLine: {
            lineStyle:
            {
              color: '#446fbd'
            }
          },
          axisLabel: {color: 'black'},
          splitLine: {
            show: true,
            lineStyle: {
              color: '#546a99'
            }
          } }],
        series: [
          {
            name: '刑事案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['刑事案件']
          },
          {
            name: '民事案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['民事案件']
          },
          {
            name: '仲裁案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['仲裁案件']
          },
          {
            name: '咨询案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['咨询案件']
          },
          {
            name: '行政案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['行政案件']
          }
        ]
      }, true)
    },
    reqMoneyApi () {
      let param = {
        lengend: [],
        xAxisData: [],
        seriesData: {}
      }
      getMoneyYearData(this.selectForm).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          let intNum = 0
          for (const key in data) {
            if (data.hasOwnProperty(key)) {
              const element = data[key]
              param.lengend.push(key)
              for (const k in element) {
                if (element.hasOwnProperty(k)) {
                  const ele = element[k]
                  if (!param.seriesData[key]) {
                    param.seriesData[key] = []
                  }
                  if (param.xAxisData.indexOf(k + '月') === -1) param.xAxisData.push(k + '月')
                  param.seriesData[key].push(ele)
                  if (key === '实收金额') intNum += parseFloat(ele)
                }
              }
            }
          }
          this.$set(this.total, 'amount', intNum)
          this.loadMoneyEchart(param)
        }
      })
    },
    loadMoneyEchart (param) {
      let m = this
      let contradictionEchart = this.$echarts.init(document.getElementById('moneyEchart'))
      contradictionEchart.setOption({
        tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
        legend: {
          data: param.lengend,
          y: '10px'
        },
        grid: {top: '15%', left: '1%', right: '5%', bottom: '5%', containLabel: true},
        calculable: true,
        xAxis: [{type: 'category', axisLabel: {color: 'black'}, axisLine: {lineStyle: m.textStyle}, data: param.xAxisData}],
        yAxis: [{type: 'value',
          name: '金额',
          axisLine: {
            lineStyle:
            {
              color: '#446fbd'
            }
          },
          axisLabel: {color: 'black'},
          splitLine: {
            show: true,
            lineStyle: {
              color: '#546a99'
            }
          } }],
        series: [

          {
            name: '实收金额',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['实收金额']
          },
          {
            name: '应收金额',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['应收金额']
          }
        ]
      }, true)
    },
    reqUsersApi () {
      let param = {
        lengend: [],
        xAxisData: [],
        seriesData: {}
      }
      let seriesData = []
      getUserYearData(this.selectForm).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          let intNum = 0
          for (const key in data) {
            if (data.hasOwnProperty(key)) {
              const element = data[key]
              param.xAxisData.push(key + '月')
              for (const k in element) {
                if (element.hasOwnProperty(k)) {
                  const ele = element[k]
                  if (!param.seriesData[k]) {
                    param.seriesData[k] = []
                  }
                  param.seriesData[k].push(ele)
                  intNum += parseFloat(ele)
                }
              }
            }
          }
          // console.log(param.seriesData)
          this.$set(this.total, 'personAmount', intNum)
          for (const j in param.seriesData) {
            if (param.seriesData.hasOwnProperty(j)) {
              const element = param.seriesData[j]
              param.lengend.push(j)
              let obj = {
                name: j,
                type: 'bar',
                data: element
              }
              seriesData.push(obj)
            }
          }
          this.loadusersEchart(param, seriesData)
        }
      })
    },
    loadusersEchart (param, seriesData) {
      console.log(param)
      let m = this
      let contradictionEchart = this.$echarts.init(document.getElementById('userEchart'))
      contradictionEchart.setOption({
        tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
        legend: {
          data: param.lengend,
          y: '10px'
        },
        grid: {top: '15%', left: '1%', right: '5%', bottom: '5%', containLabel: true},
        calculable: true,
        xAxis: [{type: 'category', axisLabel: {color: 'black'}, axisLine: {lineStyle: m.textStyle}, data: param.xAxisData}],
        yAxis: [{type: 'value',
          name: '金额',
          axisLine: {
            lineStyle:
            {
              color: '#446fbd'
            }
          },
          axisLabel: {color: 'black'},
          splitLine: {
            show: true,
            lineStyle: {
              color: '#546a99'
            }
          } }],
        series: seriesData
      }, true)
    },
    searchHandleClick (type) {
      if (type === 0) {
        this.reqCaseApi()
        this.reqMoneyApi()
      } else if (type === 1) {
        this.reqUsersApi()
      }
    }
  }
}
</script>
<style scoped>
.containerWrap {
  height: 100%
}
.container {
  height: 100%
}
.box-card {
  width:100%
}
.floor {
  padding: 15px;
  height: 100%
}
.chart-main {
  height: 270px;
}
.dzy-custom-search-box>div {
  margin-bottom: 0
}
.indexTit {
  font-size: 22px
}
</style>
